<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="layout-portlets-box ui-fluid">
            <div class="Container50 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">InputText</h1>
                    <p:panelGrid columns="3" layout="grid" styleClass="FormContent" style="border:0px !important; background:none;">
                        <p:inputText placeholder="Name" styleClass="Wid90"/>
                        <p:inputText placeholder="Email" styleClass="Wid90"/>
                        <p:inputText placeholder="Phone" styleClass="Wid90"/>

                        <p:inputText placeholder="Disabled Input" styleClass="Wid90" disabled="true"/>
                        <p:inputText placeholder="Address" styleClass="Wid90"/>
                        <p:inputText placeholder="Id" styleClass="Wid90"/>
                    </p:panelGrid>
                </div>
            </div>
            <div class="Container50 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">TextArea</h1>
                    <p:inputTextarea placeholder="Your Message" cols="20" rows="5"/>
                </div>
            </div>
        </div>

        <div class="layout-portlets-box ui-fluid">
            <div class="Container50 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">AutoComplete</h1>
                    <p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank">
                        <p:outputLabel value="Simple:" for="acSimple" />
                        <p:autoComplete id="acSimple" value="#{autoCompleteView.txt1}" completeMethod="#{autoCompleteView.completeText}" />

                        <p:outputLabel value="DropDown:" for="dd" />
                        <p:autoComplete id="dd" dropdown="true" value="#{autoCompleteView.txt6}" completeMethod="#{autoCompleteView.completeText}" />

                        <p:outputLabel value="Group:" for="group" />
                        <p:autoComplete id="group"
                                        value="#{autoCompleteView.theme4}"
                                        completeMethod="#{autoCompleteView.completeThemeContains}"
                                        var="theme"
                                        itemLabel="#{theme.displayName}"
                                        itemValue="#{theme}"
                                        converter="themeConverter"
                                        groupBy="#{autoCompleteView.getThemeGroup(theme)}"
                                        scrollHeight="250"/>
                    </p:panelGrid>
                </div>
            </div>
            <div class="Container50 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">Checkboxes</h1>
                    <p:selectManyCheckbox value="#{checkboxView.selectedConsoles}" layout="responsive" columns="3">
                        <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                        <f:selectItem itemLabel="PS4" itemValue="PS+" />
                        <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                    </p:selectManyCheckbox>
                </div>
            </div>
        </div>

        <div class="layout-portlets-box ui-fluid">
            <div class="Container50 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">RadioButtons</h1>
                    <p:selectOneRadio value="#{radioView.console}" layout="responsive" columns="3">
                        <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                        <f:selectItem itemLabel="PS4" itemValue="PS+" />
                        <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                    </p:selectOneRadio>
                </div>
            </div>
            <div class="Container50 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">SelectOneMenu</h1>
                    <p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank" style="margin-bottom:10px">
                        <p:outputLabel for="console" value="Basic:" />
                        <p:selectOneMenu id="console" value="#{selectOneMenuView.console}">
                            <f:selectItem itemLabel="Select One" itemValue="" />
                            <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                            <f:selectItem itemLabel="PS4" itemValue="PS4" />
                            <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                        </p:selectOneMenu>

                        <p:outputLabel for="car" value="Grouping: " />
                        <p:selectOneMenu id="car" value="#{selectOneMenuView.car}">
                            <f:selectItem itemLabel="Select One" itemValue="" />
                            <f:selectItems value="#{selectOneMenuView.cars}" />
                        </p:selectOneMenu>

                        <p:outputLabel for="city" value="Editable: " />
                        <p:selectOneMenu id="city" value="#{selectOneMenuView.city}" effect="fold" editable="true">
                            <f:selectItem itemLabel="Select One" itemValue="" />
                            <f:selectItems value="#{selectOneMenuView.cities}" />
                        </p:selectOneMenu>
                    </p:panelGrid>
                </div>
            </div>
        </div>

        <div class="layout-portlets-box ui-fluid">
            <div class="Container50 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">Keyboard And Password</h1>
                    <p:keyboard value="#{keyboardView.value1}" placeholder="Keyboard" styleClass="Wid90" />
                    <div class="EmptyBox10"/>
                    <p:password value="#{passwordView.password4}"
                                placeholder="Password"
                                feedback="true"
                                inline="true"
                                promptLabel="Please enter a password"
                                weakLabel="Weak"
                                goodLabel="Good"
                                strongLabel="Strong"
                                styleClass="Wid90" />
                </div>
            </div>
            <div class="Container50 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">MultiSelectListBox</h1>
                    <p:multiSelectListbox value="#{multiSelectView.selection}" effect="slide" header="Categories" showHeaders="true">
                        <f:selectItems value="#{multiSelectView.categories}" />
                    </p:multiSelectListbox>
                </div>
            </div>
        </div>

        <div class="layout-portlets-box ui-fluid">
            <div class="Container33 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">SelectCheckBoxMenu</h1>
                    <p:selectCheckboxMenu id="menu"
                                          value="#{checkboxView.selectedCities}"
                                          label="Cities"
                                          filter="true"
                                          filterMatchMode="startsWith">
                        <f:selectItems value="#{checkboxView.cities}" />
                    </p:selectCheckboxMenu>
                </div>
            </div>
            <div class="Container33 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">Input Switch</h1>
                    <p:inputSwitch value="#{selectBooleanView.value1}" offLabel="off" onLabel="on" />
                </div>
            </div>
            <div class="Container33 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">SelectOneListBox</h1>
                    <p:selectOneListbox value="#{selectOneView.option}">
                        <f:selectItem itemLabel="Option 1" itemValue="1" />
                        <f:selectItem itemLabel="Option 2" itemValue="2" />
                        <f:selectItem itemLabel="Option 3" itemValue="3" />
                    </p:selectOneListbox>
                </div>
            </div>
        </div>

        <div class="layout-portlets-box ui-fluid">
            <div class="Container33 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">SelectManyMenu</h1>
                    <p:selectManyMenu value="#{selectManyView.selectedOptions}" showCheckbox="true" style="width:200px;">
                        <f:selectItem itemLabel="Option 1" itemValue="1" />
                        <f:selectItem itemLabel="Option 2" itemValue="2" />
                        <f:selectItem itemLabel="Option 3" itemValue="3" />
                    </p:selectManyMenu>
                </div>
            </div>
            <div class="Container33 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">Spinner</h1>
                    <p:spinner value="#{spinnerView.number1}" />
                </div>
            </div>
            <div class="Container33 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">Rating</h1>
                    <h:panelGrid columns="2" cellpadding="5">
                        <h:outputText value="Basic:" />
                        <p:rating value="#{ratingView.rating1}" />

                        <h:outputText value="Callback:" />
                        <p:rating value="#{ratingView.rating2}" stars="5" cancel="false" onRate="alert('You rated ' + value)" />

                        <h:outputText value="Disabled"/>
                        <p:rating value="#{ratingView.rating4}" disabled="true" />
                    </h:panelGrid>
                </div>
            </div>
        </div>

        <div class="layout-portlets-box ui-fluid">
            <div class="Container33 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">Sliders - Horizontal</h1>
                    <p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank" style="margin-bottom: 10px">
                        <p:inputText id="slider" value="#{sliderView.number1}" />
                        <p:slider for="slider" />
                    </p:panelGrid>
                </div>
            </div>
            <div class="Container33 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">Sliders - Vertical</h1>
                    <p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank" style="margin-bottom: 10px">
                        <p:inputText id="txt4" value="#{sliderView.number4}" />
                        <p:slider for="txt4" type="vertical" />
                    </p:panelGrid>
                </div>
            </div>
            <div class="Container33 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">Sliders - Range</h1>
                    <p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank" style="margin-bottom: 10px">
                        <h:outputText id="displayRange" value="Between #{sliderView.number6} and #{sliderView.number7}" />
                        <p:slider for="txt6,txt7" display="displayRange" range="true" displayTemplate="Between {min} and {max}" />
                    </p:panelGrid>
                    <h:inputHidden id="txt6" value="#{sliderView.number6}" />
                    <h:inputHidden id="txt7" value="#{sliderView.number7}" />
                </div>
            </div>
        </div>

        <div class="layout-portlets-box ui-fluid">
            <div class="Container100">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">Calendar</h1>
                    <div class="Container40 Responsive100">
                        <p:calendar id="inline" value="#{calendarView.date1}" mode="inline" pattern="#{msgs['pattern.date']}"/>
                    </div>
                    <div class="Container60 Responsive100">
                        <p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank">
                            <p:outputLabel for="popup" value="Popup:" />
                            <p:calendar id="popup" value="#{calendarView.date2}" pattern="#{msgs['pattern.date']}"/>

                            <p:outputLabel for="multi" value="Multiple:" />
                            <p:calendar id="multi" value="#{calendarView.date7}" pages="3" pattern="#{msgs['pattern.date']}" />

                            <p:outputLabel for="effect" value="Effect:" />
                            <p:calendar id="effect" value="#{calendarView.date8}" effect="fold" pattern="#{msgs['pattern.date']}" />

                            <p:outputLabel for="datetime" value="Datetime:" />
                            <p:calendar id="datetime" value="#{calendarView.date10}" pattern="#{msgs['pattern.datetime']}"/>

                            <p:outputLabel for="time" value="Time:" />
                            <p:calendar id="time" value="#{calendarView.date11}" pattern="#{msgs['pattern.time']}" timeOnly="true" />

                            <p:outputLabel for="button" value="Button:" />
                            <p:calendar id="button" value="#{calendarView.date3}" pattern="#{msgs['pattern.date']}" showOn="button" />
                        </p:panelGrid>
                    </div>
                </div>
            </div>
        </div>

        <div class="layout-portlets-box ui-fluid">
            <div class="Container50 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">Buttons</h1>
                    <h:form>
                        <p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank">
                            <h:outputText value="SelectBooleanButton:" styleClass="Fs14"/>
                            <p:selectBooleanButton id="value1" value="#{selectBooleanView.value1}" onLabel="Yes" offLabel="No" />

                            <h:outputText value="SelectOneButton:" styleClass="Fs14"/>
                            <p:selectOneButton value="#{selectOneView.option}">
                                <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                                <f:selectItem itemLabel="PS4" itemValue="PS4" />
                                <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                            </p:selectOneButton>

                            <h:outputText value="SelectManyButton:" styleClass="Fs14"/>
                            <p:selectManyButton value="#{selectManyView.selectedOptions}">
                                <f:selectItem itemLabel="b" itemValue="b" />
                                <f:selectItem itemLabel="u" itemValue="u" />
                                <f:selectItem itemLabel="i" itemValue="i" />
                            </p:selectManyButton>

                            <h:outputText value="Button:" styleClass="Fs14"/>
                            <p:button value="Bookmark" icon="fa fa-star Fs16 white"/>

                            <h:outputText value="Button Icon Only" styleClass="Fs14"/>
                            <p:button icon="fa fa-twitter Fs16 white" />

                            <h:outputText value="CommandButton:" styleClass="Fs14"/>
                            <p:commandButton value="With Icon" id="withIcon" actionListener="#{buttonView.buttonAction}" icon="fa fa-home Fs16 white" />

                            <h:outputText value="CommandButton:" styleClass="Fs14"/>
                            <p:commandButton value="With Icon (Right Side)" icon="fa fa-eyedropper Fs16 white" iconPos="right" />

                            <h:outputText value="CommandLink:" styleClass="Fs14"/>
                            <p:commandLink id="ajax" actionListener="#{buttonView.buttonAction}">
                                <h:outputText value="Command Link" />
                            </p:commandLink>

                            <h:outputText value="Link:" styleClass="Fs14"/>
                            <p:link value="Bookmark"/>

                            <h:outputText value="SplitButton:" styleClass="Fs14"/>
                            <p:splitButton value="Save" actionListener="#{buttonView.save}" icon="fa fa-check white Fs14">
                                <p:menuitem value="Update" actionListener="#{buttonView.update}" icon="fa fa-cloud-upload" />
                                <p:menuitem value="Delete" actionListener="#{buttonView.delete}" ajax="false" icon="fa fa-close" />
                                <p:separator />
                                <p:menuitem value="Homepage" icon="fa fa-home" />
                            </p:splitButton>
                        </p:panelGrid>
                    </h:form>
                </div>
            </div>
            <div class="Container50 Responsive50">
                <div class="ContainerIndent">
                    <h1 class="BigTopic">Color Buttons</h1>
                    <h:form>
                        <p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank">
                            <p:button value="Default Theme Button"/>
                            <p:button value="Inline Button" style="width:auto"/>
                            <p:button value="Green Button" styleClass="GreenButton"/>
                            <p:button value="Red Button" styleClass="RedButton"/>
                            <p:button value="Blue Button" styleClass="BlueButton"/>
                            <p:button value="Orange Button" styleClass="OrangeButton"/>
                            <p:button value="Purple Button" styleClass="PurpleButton"/>
                            <p:button value="Cyan Button" styleClass="CyanButton"/>
                            <p:button value="Brown Button" styleClass="BrownButton"/>
                            <p:button value="Gray Button" styleClass="GrayButton"/>
                            <p:button value="Pink Button" styleClass="PinkButton"/>
                        </p:panelGrid>
                    </h:form>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>
